<template>
	<view class="slider-banner product-bg">
		<swiper class="swiper-wrapper" @change="handleChange" v-if="imgUrls.length > 0">

			
			<block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex">
				<swiper-item>
					<image mode="widthFix" :src="item" @tap="previewImage(imgUrlsIndex)" class="slide-image" />
				</swiper-item>
			</block>
		</swiper>
		<view class="pages">{{ currents || 1 }}/{{ imgUrls.length || 1 }}</view>
	</view>
</template>
<script>
	export default {
		name: "ProductConSwiper",
		components: {
			
		},
		props: {
			imgUrls: {
				type: Array,
				default: () => [],
			},
		},
		data: function() {
			let that = this;
			return {
				currents: 1,
				
				ProductConSwiper: {
					autoplay: {
						disableOnInteraction: false,
						delay: 2000,
					},
					loop: true,
					speed: 1000,
					observer: true,
					observeParents: true,
					on: {
						slideChangeTransitionStart: function() {
							that.currents = this.realIndex + 1;
						},
					},
				},
			};
		},
		mounted: function() {},
		methods: {
			handleChange(event) {
				this.currents = event.mp.detail.current + 1;
			},
			previewImage(current) {
				console.log(current)
				uni.previewImage({
					current,
					urls: this.imgUrls,
				});
			},
		},
	};
</script>
